<template>
	<div class="box-section" v-show="showForm">
		<div class="item" v-for="(item, subkey) in sectionData.allData" :key="subkey">
			<span class="name" style="">区间{{ subkey }}</span>
			<span class="bracket">(</span>
			<a-input
				class="input"
				placeholder="输入区间"
				v-if="item.beginValue.type === 'input'"
				:disabled="item.beginValue.disabled"
				v-model="item.beginValue.value"
			/>
			<span class="value" v-if="item.beginValue.type === 'string'">
				{{ item.beginValue.value }}
			</span>
			<span class="division">,</span>
			<a-input
				class="input"
				placeholder="输入区间"
				v-if="item.endValue.type === 'input'"
				:disabled="item.endValue.disabled"
				:value="item.endValue.value"
				@change="changeSectionVal($event, itemKey)"
			/>
			<span class="value" v-if="item.endValue.type === 'string'">
				{{ item.endValue.value }}
			</span>
			<span class="bracket">)</span>
			<div class="box-icon">
				<span v-if="subkey !== lengths - 1" class="icon plus" @click="addSection(itemKey)">
					<a-icon type="plus" />
				</span>
				<span
					v-if="subkey >= 1 && subkey !== lengths - 1"
					class="icon close"
					@click="delSection(itemKey)"
				>
					<a-icon type="close" />
				</span>
			</div>
		</div>
		<div class="add-item">
			<span @click="addSection(itemKey)" class="add-icon">
				<a-icon type="plus-circle" class="iconfont" />
				添加区间
			</span>
		</div>
	</div>
</template>

<script lang="ts">
import { Component, Prop, Emit, Watch, Vue } from 'vue-property-decorator'
import _ from 'lodash'

@Component({
	name: 'Section'
})
export default class extends Vue {
	@Prop() itemKey!: number
	@Prop() showForm!: boolean
	@Prop() defaultData!: any

	private dataSource: any = this.defaultData || ['']
	private last = this.dataSource?.length - 1

	private beginData = {
		beginValue: {
			type: 'string',
			value: '- ∞',
			disabled: true
		},
		endValue: {
			type: 'input',
			value: this.dataSource[0],
			disabled: false
		}
	}
	private lastData = {
		beginValue: {
			type: 'input',
			value: this.dataSource[this.last],
			disabled: true
		},
		endValue: {
			type: 'string',
			value: '+ ∞',
			disabled: true
		}
	}
	private sectionTem: any = [{ ...this.beginData }, { ...this.lastData }]
	private sectionData = { allData: this.sectionTem }
	private lengths: number = this.sectionTem.length
	// mounted
	created(): void {
		this.generateData()
	}
	// 生成数据
	@Watch('dataSource')
	private generateData() {
		const data = this.dataSource
		const res = data.map((item: any, index: number) => {
			return {
				beginValue: {
					type: data[index - 1] === undefined ? 'string' : 'input',
					value: data[index - 1] === undefined ? '- ∞' : data[index - 1],
					disabled: data[index - 1] === undefined ? false : true
				},
				endValue: {
					type: 'input',
					value: item,
					disabled: false
				}
			}
		})
		const result: any = { allData: res.concat(this.lastData) }
		this.sectionData = _.cloneDeep(result)
		this.lengths = this.sectionData.allData.length
	}
	// 增加
	@Emit('addSection')
	private addSection(itemKey: number) {
		return { itemKey, lengths: this.lengths }
	}
	// 删除
	@Emit('delSection')
	private delSection(itemKey: number) {
		return { itemKey, dataSource: this.dataSource }
	}
	// 改变值
	@Emit('changeSectionVal')
	private changeSectionVal(e: any, itemKey: number) {
		// return { e, key, dataSource: this.dataSource }//subkey,dataSource: this.dataSource
		return { e, itemKey, lengths: this.lengths }
	}
	@Watch('dataSource')
	private ChangedIntervalsData() {
		const data = _.cloneDeep({ key: this.itemKey, dataSource: this.dataSource })
		this.$emit('ChangedIntervalsData', data)
	}
}
</script>

<style lang="scss" scoped>
.box-section {
	.item {
		display: block;
		margin-bottom: 10px;
		.input {
			display: inline-block;
			width: 80px;
		}
		span {
			display: inline-block;
			&.name {
				width: 50px;
			}
			&.bracket {
				padding: 0 10px;
			}
			&.division {
				padding: 0 10px;
			}
			&.value {
				width: 80px;
				text-align: center;
			}
		}
		.box-icon {
			display: inline-block;
			width: 50px;
			font-size: 13px;
			.icon {
				font-size: 13px;
				margin-left: 8px;
				cursor: pointer;
				&:hover {
					color: #2085ef;
				}
			}
		}
	}
	.add-item {
		.add-icon {
			color: #2085ef;
			cursor: pointer;
		}
	}
}
</style>
